<template>
  <div class="app-container">
    <!-- 详情客户回款对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
      <el-descriptions :column="3" border :labelStyle="{ width: '100px' }">
        <el-descriptions-item label="编号" >
          {{ form.no }}
        </el-descriptions-item>
        <el-descriptions-item label="客户id" >
          {{ form.customId }}
        </el-descriptions-item>
        <el-descriptions-item label="客户编号" >
          {{ form.customNo }}
        </el-descriptions-item>
        <el-descriptions-item label="客户名称" >
          {{ form.customName }}
        </el-descriptions-item>
        <el-descriptions-item label="业务员" >
          {{ form.userName }}
        </el-descriptions-item>
        <el-descriptions-item label="回款金额" >
          {{ form.backMoney }}
        </el-descriptions-item>
        <el-descriptions-item label="佣金比例" >
          {{ form.rate }}
        </el-descriptions-item>
        <el-descriptions-item label="佣金金额" >
          {{ form.rateMoney }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人" >
          {{ form.createBy }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ form.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBack } from "@/api/custom/back";

export default {
  name: "BackDetail",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
    };
  },
  created() {
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        no: null,
        customId: null,
        customNo: null,
        customName: null,
        type: null,
        userName: null,
        backMoney: null,
        backTime: null,
        rate: null,
        rateMoney: null,
        createBy: null,
        createTime: null,
        remark: null,
      };
    },
    /** 修改按钮操作 */
    handleDetail(id) {
      this.reset();
      getBack(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "客户回款详情";
      });
    },
  }
};
</script>
